<template>
  <div class="film-detail-view">
    <!-- 顶部 -->
    <div class="top-box">
      <img src="../assets/05.png" class="top-img" />
      <nav>领取50元电影票</nav>
      <nav @click="back">返回 ></nav>
    </div>
    <!-- 详情 -->
    <div class="parcel" v-for="item in moremov">
      <!-- 最上面文字 -->
      <div class="crumbs-nav">
        <a href="/">猫眼电影</a>&nbsp;&gt;&nbsp;
        <span>{{ item.nm}}</span>
      </div>
      <!-- 独行月球 -->
      <div class="movie-info-top">
        <div class="movie-cover">
          <img class="imgposter" :src="`${item.img}`" />
          <img class="imgposter-play" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/poster-play.png" />
        </div>
        <!-- 文字部分 -->
        <div class="movie-desc">
          <div class="movie-desc-top">
            <div class="movie-cn-name">
              <h1 class="movie-cn-nameh1">{{item.nm}}</h1>
            </div>
            <div class="movie-en-name">{{item.enm}}</div>
            <div class="movie-other-info">
              <div class="movie-type">
                <span class="movie-cat">{{item.cat}}</span>
                <span class="movie-tag">
                  <img class="imgnoneBg"
                    src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/movie-tag-2DIMAX.png" />
                </span>
              </div>
              <div class="actors">
                {{item.star}}
              </div>
              <div class="movie-show-time">
                <span>{{item.pubDesc}}</span>
              </div>
            </div>
          </div>
          <div class="btns">
            <!-- 想看按钮 -->
            <button class="img-noneBg1">
              <img src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/want-to-watch.png" class="buttonimg" />
              <span class="buttonspan">想看</span>
            </button>
            <!-- 看过按钮 -->
            <button class="img-noneBg2">
              <img alt="看过" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star.png" class="buttonimg" />
              <span class="buttonspan">看过</span>
            </button>
          </div>
        </div>
      </div>
      <!-- 评分 -->
      <div class="real-time-word-of-mouth">
        <div class="top">
          <div class="left">
            <img class="img noneBg" alt="logo"
              src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/logo-new.png" /><span>猫眼购票评分</span>
          </div>
          <div class="right">
            <div class="num">
              <span>822,069</span>
              <span class="">人想看</span>
            </div>
            <div class="num watched">
              <span>65,156,906</span>
              <span class="">人看过</span>&nbsp;
            </div>
            <a>
              <img class="img noneBg"
                src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right-white.png" />
            </a>
          </div>
        </div>
        <img src="../assets/11.jpg" class="imgreal" />
      </div>
      <!-- 彩蛋 -->
      <div class="tip">
        <div class="icon">
          <img class="img noneBg" alt="tip icon"
            src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/tip-icon-surprise.png" />
        </div>
        <span>有1个彩蛋，片尾</span>
      </div>
      <!-- 简介 -->
      <div class="brief-introduction">
        <div class="title">
          <span>简介</span>
          <div>
            <button class="open">
              <span @click="kkk=!kkk">展开</span>
              <img class="imgnone" alt="向下箭头"
                src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png" />
            </button>
          </div>
        </div>
        <div class="content">
          <p class="line-clamp1" v-if="kkk">
            人类为抵御小行星的撞击，拯救地球，在月球部署了月盾计划。陨石提前来袭，全员紧急撤离时，维修工独孤月（沈腾
            饰）因为意外，错过了领队马蓝星（马丽
            饰）的撤离通知，一个人落在了月球。不料月盾计划失败，独孤月成为了“宇宙最后的人类”，开始了他在月球上破罐子破摔的生活……
          </p>
          <p class="line-clamp2" v-else>
            人类为抵御小行星的撞击，拯救地球，在月球部署了月盾计划。陨石提前来袭，全员紧急撤离时，维修工独孤月（沈腾
            饰）因为意外，错过了领队马蓝星（马丽
            饰）的撤离通知，一个人落在了月球。不料月盾计划失败，独孤月成为了“宇宙最后的人类”，开始了他在月球上破罐子破摔的生活……
          </p>
        </div>
      </div>
      <!-- 演职人员 -->
      <div class="title-act">
        <div class="title">
          <span>演职人员</span>
          <div>
            <button class="openyan">
              <span class="openquan">全部</span>
              <img class="imgnone2" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png" />
            </button>
          </div>
        </div>
      </div>
      <van-swipe class="swipe11" :loop="false" :show-indicators="false" :width="85" :height="160">
        <van-swipe-item class="swipe1">
          <li class="left-margin">
            <a>
              <img class="img" alt="独行月球 沈腾"
                src="https://p0.pipi.cn/basicdata/25bfd6d7537c698ea39ab47a46fa0d9bf341a.jpg?imageView2/1/w/160/h/224/q/80"
                width="80" height="112" /><span class="name">沈腾</span><span class="role">饰: 独孤月</span></a>
          </li>
        </van-swipe-item>
        <van-swipe-item class="swipe1">
          <li class="left-margin">
            <a>
              <img class="img" alt="独行月球 马丽"
                src="https://p0.pipi.cn/basicdata/25bfd6d7537c693139ddd29d3e9a10f44860a.jpg?imageView2/1/w/160/h/224/q/80"
                width="80" height="112" /><span class="name">马丽</span><span class="role">饰: 马蓝星</span></a>
          </li>
        </van-swipe-item>
        <van-swipe-item class="swipe1">
          <li class="left-margin">
            <a>
              <img class="img" alt="独行月球 常远"
                src="https://p0.pipi.cn/basicdata/25bfd6d7537c69c6965bf1091a4bc738e6da8.jpg?imageView2/1/w/160/h/224/q/80"
                width="80" height="112" /><span class="name">常远</span><span class="role">饰: 朱皮特</span></a>
          </li>
        </van-swipe-item>
        <van-swipe-item class="swipe1">
          <li class="left-margin">
            <a>
              <img class="img" alt="独行月球 李诚儒"
                src="https://p0.pipi.cn/basicdata/25bfd6d7537c69281ef2aa16b163ea6b5feb4.jpg?imageView2/1/w/160/h/224/q/80"
                width="80" height="112" />
              <span class="name">李诚儒</span>
              <span class="role">饰:孙光阳（主任）</span>
            </a>
          </li>
        </van-swipe-item>
        <van-swipe-item class="swipe1">
          <li class="left-margin">
            <a>
              <img class="img" alt="独行月球 辣目洋子"
                src="https://p0.pipi.cn/basicdata/25bfd6d7537e7acf3eecd8115cde9a65be0d5.jpg?imageView2/1/w/160/h/224/q/80"
                width="80" height="112" />
              <span class="name">辣目洋子</span>
              <span class="role">饰: 魏辣思</span>
            </a>
          </li>
        </van-swipe-item>
        <van-swipe-item class="swipe1">
          <li class="left-margin">
            <a>
              <img class="img" alt="独行月球 郝瀚"
                src="https://p0.pipi.cn/basicdata/25bfd63351b8d3af33537c7f725b1e51775d0.jpg?imageView2/1/w/160/h/224/q/80"
                width="80" height="112" />
              <span class="name">郝瀚</span>
              <span class="role">饰: 金刚鼠</span>
            </a>
          </li>
        </van-swipe-item>
        <van-swipe-item class="swipe1">
          <li class="left-margin">
            <a><img class="img" alt="独行月球 杨皓宇"
                src="https://p0.pipi.cn/basicdata/25bfd6d7537c69e19b3ba3e1fc6d7444a9e91.jpg?imageView2/1/w/160/h/224/q/80"
                width="80" height="112" /><span class="name">杨皓宇</span><span class="role">饰: 面试官</span></a>
          </li>
        </van-swipe-item>
        <van-swipe-item class="swipe1">
          <li class="left-margin">
            <a><img class="img" alt="独行月球 徐志胜"
                src="https://p0.pipi.cn/basicdata/25bfd6d77a30e1be12339e5bf600118c6fe7b.jpg?imageView2/1/w/160/h/224/q/80"
                width="80" height="112" /><span class="name">徐志胜</span><span class="role">饰: 脱口秀演员</span></a>
          </li>
        </van-swipe-item>
      </van-swipe>
      <div class="dianz"></div>
      <!-- 剧照 -->
      <div class="title-act">
        <div class="title">
          <span>剧照</span>
          <div>
            <button class="openyan">
              <span class="openquan">全部</span>
              <img class="imgnone2" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png" />
            </button>
          </div>
        </div>
      </div>
      <van-swipe class="swipe11" :loop="false" :show-indicators="false" :width="140" :height="99">
        <van-swipe-item class="swipe1">
          <li class="left-margin2">
            <a><img class="imgju"
                src="https://p0.pipi.cn/friday/531b7d1311fcb84b463e313bd92fc843.jpg?imageView2/1/w/420/h/279/q/80" /></a>
          </li>
        </van-swipe-item>
        <van-swipe-item class="swipe1">
          <li class="left-margin2">
            <a><img class="imgju" alt="avatar"
                src="https://p0.pipi.cn/friday/5f2b6ade1978d976b8351f35a1409eac.jpg?imageView2/1/w/420/h/279/q/80" /></a>
          </li>
        </van-swipe-item>
        <van-swipe-item class="swipe1">
          <li class="left-margin2">
            <a><img class="imgju" alt="avatar"
                src="https://p0.pipi.cn/friday/8f8a1458698cb629fe91a28f699e4da3.jpg?imageView2/1/w/420/h/279/q/80" /></a>
          </li>
        </van-swipe-item>
        <van-swipe-item class="swipe1">
          <li class="left-margin2">
            <a><img class="imgju" alt="avatar"
                src="https://p0.pipi.cn/friday/84bc0519a26b482dfc3f6de24d47eee4.jpg?imageView2/1/w/420/h/279/q/80" /></a>
          </li>
        </van-swipe-item>
        <van-swipe-item class="swipe1">
          <li class="left-margin2">
            <a><img class="imgju" alt="avatar"
                src="https://p0.pipi.cn/friday/70d508a1154316ca854d4b29ea3558b3.jpg?imageView2/1/w/420/h/279/q/80" /></a>
          </li>
        </van-swipe-item>
        <van-swipe-item class="swipe1">
          <li class="left-margin2">
            <a><img class="imgju" alt="avatar"
                src="https://p0.pipi.cn/friday/afb58bf1cd6d65ab5ab7bf4bafc23387.jpg?imageView2/1/w/420/h/279/q/80" /></a>
          </li>
        </van-swipe-item>
        <van-swipe-item class="swipe1">
          <li class="left-margin2">
            <a><img class="imgju" alt="avatar"
                src="https://p0.pipi.cn/friday/27f7ed0e5de4ad8ca08bcafdd23a2e2e.jpg?imageView2/1/w/420/h/279/q/80" /></a>
          </li>
        </van-swipe-item>
        <van-swipe-item class="swipe1">
          <li class="left-margin2">
            <a><img class="imgju" alt="avatar"
                src="https://p0.pipi.cn/friday/ad3f11025d3a000ebef2302655a4347e.jpg?imageView2/1/w/420/h/279/q/80" /></a>
          </li>
        </van-swipe-item>
        <van-swipe-item class="swipe1">
          <li class="left-margin2">
            <a><img class="imgju" alt="avatar"
                src="https://p0.pipi.cn/friday/f1243d4f8de4b7520889a7b38951f273.jpg?imageView2/1/w/420/h/279/q/80" /></a>
          </li>
        </van-swipe-item>
        <van-swipe-item class="swipe1">
          <li class="left-margin2">
            <a><img class="imgju" alt="avatar"
                src="https://p0.pipi.cn/friday/c630d0ae6c994fd99cd2d34a8c245aa7.jpg?imageView2/1/w/420/h/279/q/80" /></a>
          </li>
        </van-swipe-item>
      </van-swipe>
      <!-- 票房 -->
      <div class="title-act">
        <div class="title">
          <span>票房</span>
          <div>
            <button class="openyan">
              <span class="openquan">全部</span>
              <img class="imgnone2" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png" />
            </button>
          </div>
        </div>
      </div>

      <div class="data-box">
        <div class="item">
          <div class="value">2</div>
          <div class="namep">昨日排名</div>
        </div>
        <div class="item">
          <div class="value">97,588</div>
          <div class="namep">首周票房(万)</div>
        </div>
        <div class="item">
          <div class="value">273,807</div>
          <div class="namep">累计票房(万)</div>
        </div>
      </div>
      <!-- 购票 -->
      <div class="buy-ticket-btn">
        <div class="buy-wrapper">
          <img class="imneBg" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/share-icon.png" />
          <a class="goto-ticket" @click="jump">特惠购票</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
import axios from "axios";
import { Button } from "vant";
export default {
  name: "FilmDetailView",
  data (){
    return {
      moremov :[],
      kkk:true,
    }
  },
  created(){
    // console.log(this.$route.params);
    axios
      .get("/maoyan/ajax/moreClassicList", {
        params: {
          sortId: 1,
          showType: 3,
          limit: this.$route.params.offset,
          offset: this.$route.params.offset,
          optimus_uuid:
            "3F02BD801D6511EDBB72C16CB199FA4632735EFA28174C9DBF684009100890A3",
          optimus_risk_level: 71,
          optimus_code: 10,
        },
      }).then((data)=>{
        let moveList = data.data.classicMovies.list
        //传过来的id与接口数据匹配
     const morem =moveList.find((item)=>{
          return item.id == this.$route.params.id
        })
        // console.log(morem);
        this.moremov.push(morem)
        // console.log(this.moremov);
        if(this.moremov[0]==undefined){
          //当没有信息的时候  弹出提醒  并返回
          return  alert('该电影已下架'),
           this.$router.back();
        }
      }).catch((err)=>{
        console.log(err);
      })
  },
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Button.name]: Button,
  },
  methods: {
    jump() {
      this.$router.replace({ name: "cinemasmovie" });  
    },
    back(){
      this.$router.go(-1);  
    },
  },
};
</script>

<style scoped>


.film-detail-view {
  list-style: none;
}

.parcel {
  width: 100%;
  height: 550px;
  overflow: auto;
  background-color: #293D66;
}

.top-box {
  height: 58px;
  border: 1px solid #ccc;
  background-color: #fff;
}

.top-img {
  width: 94px;
  height: 35px;
  position: absolute;
  line-height: 42px;
  top: 10px;
  left: 14px;
}

.top-box nav:nth-of-type(1) {
  font-size: 14px;
  line-height: 58px;
  position: absolute;
  right: 100px;
  color: rgb(102, 102, 102);
  font-weight: 620;
  height: 17px;
}

.top-box nav:nth-of-type(2) {
  font-size: 16px;
  line-height: 58px;
  position: absolute;
  right: 12px;
  color: rgb(179, 126, 126);
  font-weight: 700;
  height: 17px;
  text-align: center;
}

.crumbs-nav {
  margin: 25px 0 0 15px;
  font-size: 14px;
  color: #ccc;
}

.crumbs-nav a {
  color: #ccc;
}

.movie-info-top {
  width: 343px;
  height: 143px;
  margin: 10px auto;
  /* background-color: #295454; */
  position: relative;
  display: flex;
}

.movie-cover {
  float: left;
  height: 143px;
  width: 100px;
}

.imgposter {
  height: 143px;
  width: 100px;
}

.imgposter-play {
  height: 30px;
  width: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.movie-desc {
  flex-grow: 1;
  margin-left: .24rem;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  overflow: hidden;
  /* background-color: aqua; */
  width: 231px;
  height: 145px;
}

.movie-desc-top {
  display: flex;
  flex-flow: column;
  width: 231px;
  height: 13px;
  margin-left: 9px;
}

.movie-cn-nameh1 {
  font-size: 20px;
  margin: 0;
  width: 206px;
  height: 30px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #fff;
}

.movie-en-name {
  font-size: 12px;
  height: 18px;
  color: #A5ADB7;
  line-height: 18px;
}

.movie-type {
  font-size: 12px;
  display: flex;
  align-items: center;
  color: #A5ADB7;
}

.imgnoneBg {
  height: 14px;
}

.actors {
  font-size: 12px;
  color: #A5ADB7;
}

.actors a {
  font-size: 12px;
  color: #A5ADB7;
}

.movie-show-time {
  height: 12px;
  color: #A5ADB7;
  font-size: 12px;
  line-height: 18px;
}

/* 按钮 */
.img-noneBg1 {
  justify-content: center;
  align-items: center;
  background: hsla(0, 0%, 100%, .35);
  border-radius: 5px;
  font-size: 16px;
  box-shadow: 0 0.02rem 0.08rem 0 rgb(0 0 0 / 10%);
  width: 110px;
  height: 30px;
  color: #fff;
  margin: 15px 0 0 9px;
}

.buttonimg {
  width: 14px;
  height: 14px;
}

.buttonspan {
  font-size: 14px;
  margin-left: 2px;
}

.img-noneBg2 {
  justify-content: center;
  align-items: center;
  background: hsla(0, 0%, 100%, .35);
  border-radius: 5px;
  font-size: 16px;
  width: 110px;
  height: 30px;
  color: #fff;
  margin-left: 10px;
}

/* 评分 */
/* 评分最外围大框 */
.real-time-word-of-mouth {
  background-color: #18293D;
  border-radius: 10px;
  margin-top: 15px;
  padding: 9px 10px 10px 0;
  box-sizing: border-box;
  width: 333px;
  height: 83px;
  margin: 0 auto;
}

.real-time-word-of-mouth>.top {
  display: flex;
  padding-left: 10px;
}

.real-time-word-of-mouth>.top>.left {
  font-size: 12px;
  display: flex;
  color: #fff;
}

.real-time-word-of-mouth>.top img {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.real-time-word-of-mouth>.top>.right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 12px;
  margin-right: 2px;
  color: #A5ADB7;
  margin-left: 20px;
}

.real-time-word-of-mouth>.top>.right .num {
  opacity: .6;
}

.real-time-word-of-mouth>.top>.right .num.watched {
  margin-left: 11px;
}

.real-time-word-of-mouth>.top>.right img {
  width: 5px;
  height: 9px;
}

.real-time-word-of-mouth>.middle {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 11px 0 3px 0;
}

.real-time-word-of-mouth>.middle>.left-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

.real-time-word-of-mouth>.middle>.left-section>.left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  margin-right: 4px;
}

.imgreal {
  width: 300px;
  margin-left: 16px;
}

.tip {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 0;
  margin-left: 10px;
  color: #fff;
  font-size: 15px;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  margin-right: 7px;
}

.icon img {
  max-width: 100%;
  height: 100%;
}

.brief-introduction {
  position: relative;
  padding: 16px 0 0;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 343px;
  margin: 0px auto;
}

.title>span {
  font-size: 15px;
  color: #fff;
}

.brief-introduction>.title>div button {
  font-size: 12px;
  color: #fff;
  width: 45px;
}

.open {
  font-size: 12px;
  opacity: .6;
  width: 20px;
  background-color: #18293D;
}

.imgnone {
  transform: rotate(90deg);
  width: 5px;
  height: 9px;
}

.content {
  width: 343px;
  font-size: 15px;
  line-height: 26px;
  margin: auto;
}

.line-clamp1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 343px;
  height: 78px;
  color: #fff;
}
.line-clamp2 {
  width: 343px;
  color: #fff;
}


.buy-ticket-btn {
  background-color: #fff;
  height: 60px;
  width: 100%;
  overflow: hidden;
  margin: 0;
  position: fixed;
  bottom: 0px;
}

.buy-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.imneBg {
  margin-left: 24px;
  margin-right: 30px;
  width: 19px;
  height: 19px;
}

.goto-ticket {
  flex: 1;
  height: 44px;
  background-image: linear-gradient(-90deg, #fb3333, #ff5269);
  box-shadow: 0 0.06rem 0.12rem 0 rgb(251 51 51 / 30%);
  border-radius: 44px;
  font-size: 17px;
  color: #fff;
  text-align: center;
  line-height: 44px;
  margin: 0 10px;
}

.title-act {
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.go-to-all-actors {
  font-size: 12px;
  width: 20px;
  background-color: #18293D;
}

.imgnone2 {
  width: 5px;
  height: 9px;
}

.openquan {
  font-size: 12px;
  width: 20px;
  color: #fff;
}

.openyan {
  font-size: 12px;
  opacity: .6;
  width: 45px;
  background-color: #18293D;
}

.title-act {
  margin-top: 10px;
}

.left-margin {
  margin: 10px 10px 0 0;
  width: 80px;
  height: 148px;
}

.swipe11 {
  width: 345px;
  display: flex;
  overflow: hidden;
  margin: 0 auto;
}

.swipe1 {
  width: 345px;
  display: flex;
}

.cushion {
  height: 60px;
  width: 375px;
}

.name {
  width: 82px;
  height: 18px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  display: block;
  color: #fff;
}

.role {
  width: 82px;
  height: 18px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  color: #ccc;
  text-align: center;
}

.left-margin2 {
  width: 140px;
  height: 99px;
  margin: 10px 10px 0 0;
  overflow: hidden;
}

.imgju {
  width: 140px;
  height: 99px;
}

.data-box {
  width: 345px;
  height: 67px;
  background-color: #f8f8f8;
  border-radius: 10px;
  margin: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  width: 115px;
  height: 44px;
  flex-grow: 1;
  /* padding: 12px 0 11px 0; */
  text-align: center;
}

.value {
  font-size: 17px;
  color: #f03d37;
  line-height: 25px;
}

.namep {
  font-size: 12px;
  color: #666;
}
</style>
